<template>
  <div class="silde_box">
    <slide-verify class="silde_box" ref="block" :imgs="imgs" :slider-text="text" :accuracy="accuracy" @again="onAgain"
      @success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify>
  </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive } from "vue";
// @ts-ignore
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

const emit = defineEmits(["verify-success"])

const text = ref('向右滑动->')
const accuracy = ref(1)
const imgs = reactive(['https://images.pexels.com/photos/12889634/pexels-photo-12889634.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'])

const block = ref<SlideVerifyInstance>();

const onAgain = () => {
  // 刷新
  block.value?.refresh();
};

const onSuccess = (times: number) => {
  emit("verify-success", times);
  block.value?.refresh();
};

const onFail = () => {
  // 验证不通过
};

const onRefresh = () => {
  // 点击了刷新小图标
};

const handleClick = () => {
  // 刷新
  block.value?.refresh();
};
</script>
<style scoped>
.silde_box {
  margin: 0 auto;
}
</style>